<template>
	<view class="content">
		<!-- 图片 -->
		<view class="aa" :style="{backgroundImage:`url(${list.img1v1Url})`}" @click.capture="maskFalse">
			<view class="cc">
				<image @click="back" class="bb" src="../../img/left.png" mode=""></image>
				<view style="font-weight: 600;">
					{{list.name}}
				</view>
			</view>
			<button class="dd">
				<image class="ff" src="../../img/jia.png" mode=""></image>
				<view class="">
					收藏
				</view>
			</button>
		</view>
		<!-- 内容 -->
		<view class="he">
			<view class="foot">
				<view class="foot-top">
					<image class="bo" src="../../img/bofang.png" mode=""></image>
					<view class="foot-left">
						播放全部
					</view>
					<view class="foot-num">
						(共50首)
					</view>
				</view>
			</view>
			<!--  -->
			<view class="hua">
				<musicList v-for="(item,index) in list1" @click.native="listClick(item,index)" :key="index" :img="index+1"
					:nameValue="item.name" :describe="fn(item.name)"></musicList>
			</view>
		</view>
		<!-- <musicTabbar></musicTabbar> -->
		<view v-show="mp3!=''">			
		<musicTabbar :listIndex="listIndex" @listTrue="listTrue" :flag="flag" :mp3="mp3" :title.sync="title" :url="img" :desc="desc"
			:list="list1"   :play="true" @toMp3="toMp3"></musicTabbar>
			</view>
	</view>
</template>

<script>
	import {
		SingerHot,
		getMpthree
	} from '../../api/singer.js'
	import musicList from '../../components/musicList/musicList.vue'
	import musicTabbar from '@/components/musicTabbar/musicTabbar.vue';
	export default {
		components: {
			musicList,
			musicTabbar
		},
		data() {
			return {
				id: 0, //传过来的id
				list: {},
				list1: [],
				list2: {},
				mp3: '', //音乐的路径
				title: "", //标题
				desc: "", //描述
				img: "", //图片
				flag: false, //列表状态
				listIndex:listIndex
			}
		},
		onLoad(e) {
			// console.log(e)
			this.id = e.id
			// this.img=e.img
			this.SingerHot()
			// this.name = uni.getStorageSync('name')
			this.fn()
		},
		methods: {
			// 返回上一页
			back() {
				uni.navigateBack()
			},
			// 传向组建的函数
			fn(name) {
				return `${this.list.name}-${name}`
			},
			// 封装的请求
			SingerHot() {
				SingerHot(this.id).then(res => {
					// console.log(res)
					this.list = res.data.artist
					this.list1 = res.data.hotSongs
				})
			},
			// 列表的点击事件
			listClick(item,index) {
				this.listIndex = index
				console.log(this.listIndex);
				// console.log(id);
				getMpthree(item.id).then(res => {
					// console.log(res);
					this.list2 = res.data.data[0];
					// console.log(this.list2);
					this.mp3 = this.list2.url;
					this.title = item.name;
					this.desc = item.al.name;
					this.img = item.al.picUrl

				})
			},
			// 右侧的列表的显示时间
			listTrue() {
				this.flag = true;
				console.log(this.flag);
			},
			// 头部的点击会将这个列表隐藏掉
			maskFalse() {
				this.flag = false;
			},
			// 点击列表的音乐会传到父组件重新进行赋值
			toMp3(obj) {
				this.mp3 = obj.mp3;
				this.title = obj.title;
				this.img = obj.img;
			}
		}
	}
</script>

<style lang="scss">
	.aa {
		width: 100%;
		height: 320px;
		background-size: 100% 100%;
		color: #fff;
		position: relative;

		.cc {
			display: flex;
			align-items: center;

			.bb {
				width: 30px;
				height: 30px;
			}
		}

		.dd {
			display: flex;
			align-items: center;
			justify-content: center;
			// width: 120px;
			height: 50px;
			border-radius: 50px;
			// background-color: #d44439;
			position: absolute;
			color: #fff;
			top: 215px;
			left: 124px;

			.ff {
				width: 20px;
				height: 20px;
				margin-right: 10px;
			}
		}
	}

	.foot {
		width: 100%;
		height: 100%;
		background-color: #fff;
		border-radius: 5px;
		box-sizing: border-box;

		.foot-top {
			width: 100%;
			padding: 10px 0;
			border-bottom: 1px solid #ccc;
			display: flex;
			align-items: center;
		}
		.bo {
			width: 25px;
			height: 25px;
			margin-left: 10px;
		}

		.foot-num {
			color: #ccc;
			font-size: 12px;
		}

		.foot-left {
			margin-left: 20px;
		}
	}

	.hua {
		overflow: auto;
		height: calc(100vh - 66px);
	}
	.he {
		position: absolute;
		top: 277px;
		width: 100%;
	}
	// .content {
	// 	position: relative;
	// }
	button {
	 --glow-color: rgb(217, 176, 255);
	 --glow-spread-color: rgba(191, 123, 255, 0.781);
	 --enhanced-glow-color: rgb(231, 206, 255);
	 --btn-color: rgb(100, 61, 136);
	 border: .25em solid var(--glow-color);
	 padding: 1em 3em;
	 color: var(--glow-color);
	 font-size: 15px;
	 font-weight: bold;
	 background-color: var(--btn-color);
	 border-radius: 1em;
	 outline: none;
	 box-shadow: 0 0 1em .25em var(--glow-color),
	        0 0 4em 1em var(--glow-spread-color),
	        inset 0 0 .75em .25em var(--glow-color);
	 text-shadow: 0 0 .5em var(--glow-color);
	 position: relative;
	 transition: all 0.3s;
	}
	
	button::after {
	 pointer-events: none;
	 content: "";
	 position: absolute;
	 top: 120%;
	 left: 0;
	 height: 100%;
	 width: 100%;
	 background-color: var(--glow-spread-color);
	 filter: blur(2em);
	 opacity: .7;
	 transform: perspective(1.5em) rotateX(35deg) scale(1, .6);
	}
	
	button:hover {
	 color: var(--btn-color);
	 background-color: #d44439;
	 box-shadow: 0 0 1em .25em var(--glow-color),
	        0 0 4em 2em var(--glow-spread-color),
	        inset 0 0 .75em .25em var(--glow-color);
	}
	
	button:active {
	 box-shadow: 0 0 0.6em .25em var(--glow-color),
	        0 0 2.5em 2em var(--glow-spread-color),
	        inset 0 0 .5em .25em var(--glow-color);
	}
</style>
